<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作全网热播视频页面</title>
    <style>
        *{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
        ul,ol,li{list-style: none;}
        #play{margin: 0 auto; width:680px; overflow: hidden;}
        #play h1{line-height: 40px; font-size: 22px;}
        #play ul>li{
            float: left;
            width: 220px;
            height: 308px;
            overflow: hidden;
            position: relative;
        }
        #play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
        #play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
        #play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
        #play ol{padding-top: 13px; padding-right: 5px;}
        #play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
        #play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}
        
    </style>
</head>
<body>
<section id="play">
    <h1>全网热播视频</h1>
    <ul>
        <li><img src="images/flv01.jpg"><p>昊花梦</p><span>1</span></li>
        <li><img src="images/flv02.jpg"><p>好先生</p><span>2</span></li>
        <li>
            <ol>
                <li><span>3</span>三八线<p>加入看单</p></li>
                <li><span>4</span>吉详天宝<p>加入看单</p></li>
                <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
                <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
                <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
                <li><span>8</span>琅琊榜<p>加入看单</p></li>
                <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
                <li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
            </ol>
        </li>
    </ul>
</section>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    //使用选择器:not( ) 设置图片与右侧内容间距10px 
    $('ul>li:not(:nth-of-type(3))').css('marginRight','10px');

    //使用选择器:last设置右侧列表背景颜色为#f0f0f0 
    $('ul>li:last').css('backgroundColor','#f0f0f0 ');

    /* 使用层次选择器、:first、:not( )设置前三个视频名称前的数字1、2、3背景颜色为#f0a30f，
       后面的数字背景颜色为#a4a3a3  
       3、5、6、7后的箭头向上，4、8、9、10后的箭头向下  */
    $('span:lt(3)').css('backgroundColor','#f0a30f');
    $('span:gt(2)').css('backgroundColor','#a4a3a3');
    var img1 = `<img src="./images/green.jpg">`;
    var img2 = `<img src="./images/orange.jpg">`;
    $('p:gt(1)').each(function(i){
      if(i==1||i==5||i==6||i==7){
          $(this).after(img1)
      }else{
        $(this).after(img2)
      }
    });

</script>

</body>
</html>